<template>
  <el-dialog
    v-model="model['isShow']"
    draggable
    :close-on-click-modal="false"
    destroy-on-close
    title="标记内容"
    width="50%"
    @open="openClick"
  >
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        mode="default"
      />
      <Editor
        v-model="valueHtml"
        style="height: 500px; overflow-y: hidden"
        :defaultConfig="editorConfig"
        mode="default"
        @onCreated="handleCreated"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="Confirm">确定</el-button>
        <el-button @click="model.isShow = false"> 取消 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
interface Emits {
  (e: "textChange", val: String): void;
}
const emit = defineEmits<Emits>();
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const model = defineModel({ default: { isShow: false, valueHtml: "" } });
const valueHtml = ref("");
// '<p><span style="color: rgb(231, 95, 51);"><strong>123123123</strong></span><img src="https://img2.baidu.com/it/u=2102289922,1747730072&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1734" alt="xxx" data-href="https://img2.baidu.com/it/u=2102289922,1747730072&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1734" style=""/></p>'

// 模拟 ajax 异步获取内容
onMounted(() => {
  // setTimeout(() => {
  //   valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
  // }, 1500);
});

const toolbarConfig = {
  toolbarKeys: [
    "bold", // 加粗
    "italic", // 斜体
    "through", // 删除线
    "underline", // 下划线
    "bulletedList", // 无序列表
    "numberedList", // 有序列表
    "color", // 文字颜色
    "insertLink", // 插入链接
    "fontSize", // 字体大小
    "lineHeight", // 行高
    "uploadImage", // 上传图片
    // "delIndent", // 缩进
    // "indent", // 增进
    "deleteImage", //删除图片
    "divider", // 分割线
    "insertImage", // 网络图片
    // "insertTable", // 插入表格
    "justifyCenter", // 居中对齐
    "justifyJustify", // 两端对齐
    "justifyLeft", // 左对齐
    "justifyRight", // 右对齐
    "undo", // 撤销
    "redo", // 重做
    "clearStyle", // 清除格式
    "fullScreen", // 全屏
  ],
};
const editorConfig = { placeholder: "请输入内容..." };
const openClick = () => {
  //  valueHtml.value =
};
const Confirm = () => {
  emit("textChange", valueHtml.value);
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
</script>
